@charset 'utf-8';
@function r($px) {
    @return ($px/40) * 1rem;
}

@function half($px) {
    @return ($px/2) * 1px;
}

html,
body {
    
    header {
        padding: half(48) half(23) half(18);
        a {
            .Back {
                width: half(123);
                height: half(57);
                background-color: #ffffff;
                border-radius: half(20);
                border: solid 1px #ff9344;
                p {
                    font-size: half(26);
                    color: #000;
                    line-height: half(57);
                    text-align: center;
                }
            }
        }
        .classify {
            font-size: half(26);
            text-align: center;
            padding-top: half(16);
        }
        .select {
            width: half(159);
            height: half(56);
            background-color: #ffffff;
            border: solid 1px #ff9344;
            overflow: hidden;
            background-image: url(../img/triangle.jpg);
            background-size: half(32);
            background-repeat: no-repeat;
            background-position: half(100) half(24);
            select {
                width: 100%;
                height: 100%;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                border: none;
                diqplay: block;
                padding-left: half(14);
                background: transparent;
            }
        }
    }
    section {
        .carousel {
            box-sizing: border-box;
            padding: 0 half(27) half(53);
            width: 100%;
            >div {
                width: 25%;
                img {
                    width: r(148);
                }
                div {
                    font-size: half(26);
                    text-align: center;
                    padding-right: half(40);
                }
            }
        }
        .cate_title,.motion_title,.film_title {
            box-sizing: border-box;
            padding: 0 half(21) half(38);
            * {
                display: inline-block;
                vertical-align: middle;
            }
            >div:first-child img {
                
            }
            >div:first-child span {
                font-size: half(30);
                margin-right: half(8);
            }
            >div:last-child {
                font-size: half(24);
                margin-top: half(8);
                
                img {
                    width: r(25);
                    padding-left: half(8);
                }
            }
        }
        .cate_title{
            >div:first-child{
                img{
                    width: r(52);
                    
                }
            }
        }
        .motion_title{
            >div:first-child{
                img{
                    width: r(47);
                    
                }
            }
        }
        .film_title{
            >div:first-child{
                img{
                    width: r(53);

                }
            }
        }.cate_img,.motion_img,.film_img{
            display: flex;
            justify-content: space-around;
           div{
              img{
                  width: r(133);
                  padding-bottom: half(52);
              }
           }
        }
        
    }
}